<%--
  Created by IntelliJ IDEA.
  User: cyrus
  Date: 2021/06/30
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户详情</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <img id="avatar" width="200px" height="200px" src="/upload/ec02491511.jpg" alt="" />
    <input type="file" onchange="onSelectImage(this)">

<script>
    // 这个e就是input框
    function onSelectImage(e) {
        // 获取到文件对象
        var file = e.files[0];
        // 文件上传
        // 前端提供了一个FormData对象. 对应类型就是multipart/form-data
        // 前端提供 URLSearchParams对象，对应的类型是  application/x-www-form-urlencoded
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url:'${pageContext.request.contextPath}/user/upload',
            type:"post",
            data: formData,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            success(res) {
                if (res.success) {
                    $("#avatar").attr("src", res.data);
                }
            }
        })
    }

</script>

</body>
</html>
